import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import styles from "./style.module.css";
import clsx from "clsx";
interface PopupProps {
  children: any;
  visible: boolean;
  onCancel: () => void;
}
const Popup: React.FC<PopupProps> = (props) => {
  const { children, visible, onCancel } = props;
  const [active, setActive] = useState(false);

  useEffect(() => {
    setActive(visible);
  }, [visible]);

  return createPortal(
    <>
      {visible && <div className={styles.mask} onClick={() => onCancel()}></div>}
      {visible && (
        <div
          className={clsx({ [styles.active]: active }, styles["action-sheet"])}
        >
          {children}
        </div>
      )}
    </>,
    document.body
  );
};

export default Popup;
